<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>04-事件处理</title>
</head>
<body>
<div id="app">
    <button v-on:click="num++">点赞</button>
    <button @click="cancel">取消点赞</button>
    <div>有 {{ num }} 个赞</div>
    <div id="outer" style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
        大div
        <div id="inner" style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
            小div <br/>
            <a id="link" href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
        </div>
    </div>
    <input v-model="num" type="text" v-on:keyup.up="num++" @keyup.down="cancel" @click.ctrl="num=10"><br/>
</div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            cancel() {
                --this.num;
            },
            hello: function (event) {
                alert("点击了" + event.target.id);
            }
        }
    });
</script>
</body>
</html>